<template>
    <div class="view-container">
        <div class="">
            <h1>普通发布</h1>
            <div class="block" v-if="!isEdit" style="margin-bottom: 24px">
                <category-choose @get-params1-n="getParamsNormal" :id="id"></category-choose>
            </div>
            <div style="margin-top: 224px ;display: block;text-align: center;" v-if="!isEdit">
                <el-button type="primary" @click="renderTemplate1"  :disabled="canClick" size="large"
                           class="next">下一步
                </el-button>
            </div>
            <div class="productEdit" v-if="isEdit">
                <el-tabs v-model="editPro" type="card" @tab-click="tabChange" v-if="canShow">
                    <el-tab-pane v-for="tab in setproHeaders" :key="tab.key" :name="tab.key">
                    <span slot="label">
                        {{tab.label}}
                    </span>
                    </el-tab-pane>
                </el-tabs>

                <div class="">
                    <keep-alive>
                        <component :is="currentComponent" @nextprew="nextprew" :category-name="categoryNamesNormal" ref="component">
                        </component>
                    </keep-alive>
                </div>

                <div style="margin-top: 24px ;display: block;text-align: center;">
                    <el-button @click="backToPublish" >取消发布</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import categoryChoose from './tabcontent/categoryChoose.vue'
    import proInfo from './tabcontent/proInfo.vue';
    import proIntro from './tabcontent/proIntro.vue';
    import proParams from './tabcontent/proParams.vue';
    import proSpeci from './tabcontent/proSpeci.vue';
    import {getTitleText} from '@/api/normalPublish';
    import {clearSession} from '@/utils/removeSession';
    import {getTab, setTab} from '@/utils/goodspub';
    import {setPubIds, getPubIds, removePubIds} from '@/utils/storeCategoryIds';

    export default {
        components: {
            'pro-info': proInfo,
            'pro-intro': proIntro,
            'pro-params': proParams,
            'pro-speci': proSpeci,
            'category-choose': categoryChoose
        },
        name: 'goodsPublishNormal',
        data() {
            return {
                canShow: false,
                id: 1,
//                非标品发布
                options: [
                ],
                isEdit: false,
                editPro: 'pro-info',
                currentComponent:'pro-info',
                setproHeaders: [
                    {label: "基本信息", key: "pro-info"},
                    {label: "商品介绍", key: "pro-intro"},
                    {label: "商品参数", key: "pro-params"},
                    {label: "规格类型", key: "pro-speci"}
                ],
                categoryIdsNormal: {},
                categoryNamesNormal: {}
            }
        },
        computed:{
            canClick(){
                if(JSON.stringify(this.categoryIdsNormal)!='{}'){
                    return false
                }else {
                    return true
                }
            }
        },
        mounted() {
            if (JSON.stringify(getPubIds()) != '{}') {

//                如果没有点击取消发布 说明存在 直接跳进来编辑环节
                this.isEdit = true;
                getTitleText(getPubIds())
                    .then((resp) => {
//                        console.log(resp);
                        this.categoryNamesNormal = resp.data;
                        this.canShow = true;

                    })
                    .catch((err) => {
//                        console.log(err);
                    });
//                直接进来后就到编辑的页面
                let activetab = getTab();
                if (this.setproHeaders.some((tab) => {
                        return activetab === tab.key
                    })) {
                    this.editPro = activetab;
                    this.currentComponent=activetab;
                }
            }
        },
        methods: {
            tabChange(tab, event) { //切换tab事件
                if(tab.name){
                    setTab(tab.name);
                    // console.log(JSON.stringify(getProInfo()));
                    //console.log('current component:' + this.currentComponent);
                    //console.log('target component:' + tab.name);
                    this.$refs['component'].save();
                    setTimeout(()=>{
                        this.currentComponent = tab.name;
                    },50);
                }
            },
            nextprew(tabName) //触发上一步下一步按钮操作
            {
                this.editPro = tabName;
                this.currentComponent=tabName;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            getParamsNormal(value) {
                // console.log(value);
                this.categoryIdsNormal = value;
            },
            renderTemplate1() {
//                清除缓存
                clearSession();
//下一步
                if (JSON.stringify(this.categoryIdsNormal) == '{}') {
                    this.$message({
                        message: '您还没选择商品分类',
                        type: 'warning'
                    });
                    return
                }
                this.isEdit = true;
//                console.log(this.categoryIdsNormal);
//                记录存储
                sessionStorage.setItem('GOODSPUB_TAB_KEY','pro-info');
                this.editPro='pro-info';
                this.currentComponent='pro-info';
                setPubIds(this.categoryIdsNormal);
//              拿到数据 传到基本信息页面
                getTitleText(this.categoryIdsNormal)
                    .then((resp) => {
//                        console.log(resp);
                        this.categoryNamesNormal = resp.data;
                        this.canShow = true;
                    })
                    .catch((err) => {
//                        console.log(err);
                        this.isEdit=false;
                    });

            },
            backToPublish() {
                this.$confirm('此操作将丢失编辑的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    clearSession();
                    this.isEdit = false;
                    sessionStorage.setItem('GOODSPUB_TAB_KEY','pro-info');
                    this.editPro='pro-info';
                    this.currentComponent='pro-info';
                    removePubIds();
                    this.$router.push({path: '/goods/publish'})
                }).catch(() => {

                });

            },
        },
    }
</script>

<style lang="less" scoped>

</style>
